<template>
	<div class="per_view">
		<!-- <van-nav-bar :border="false" title="我的" /> -->
		<div class="per_top">
			我的
		</div>
		<div class="p_contetn">
			
			<!-- 顶部基本信息 -->
			<div class="pc_top">
				<div class="pt_left">
					
					<img class="p_head" v-if="userInfo.avatar == null" :src="myApp.srcPath('user-head.png')" alt="">
					<img class="p_head" v-if="userInfo.avatar != null" :src=" this.myApp.GetDomaiName() + userInfo.avatar" alt="">
					
					<div style="display: flex;flex-direction: column;">
						<span>{{userInfo.mobile}}(ID:{{userInfo.id}})<img v-if="userInfo.level > 0" class="p_levelIco" :src="myApp.srcPath(userInfo.level + '.png','images/vip_ico')" alt=""></span>
						<p class="p_authentication" v-if="userInfo.is_sh == 1">
							<img :src="myApp.srcPath('V.png')" alt="">
							已认证
						</p>
						
						<p class="p_authentications" v-if="userInfo.is_sh != 1">
							<!-- <img :src="myApp.srcPath('V.png')" alt=""> -->
							暂未认证
						</p>
					</div>
					
				</div>
				
				<img @click="goUrl('SetUp')" class="pt_right" :src="myApp.srcPath('set-up.png')" />
			</div>
			
			
			<!-- 收款展示 -->
			<div class="p_item" :style=" 'background-image: url(' + myApp.srcPath(`home-item.png`) + ')'">
			
				<div>
					<p>帐户余额(元)</p>
					<span>￥{{userInfo.jifen_wia}}</span>
				</div>
			
				<div>
					<p>可派额度</p>
					<!-- <span>{{userInfo.jifen_wf}}</span> -->
					<span>{{userInfo.jifen_wf}}</span>
				</div>
			
				<div class="p_solid"></div>
			</div>
			
			<!-- 功能设置 -->
			<div class="per_item">
				<div class="pi_title">功能设置</div>
				
				<div class="pi_itemView">
					
					<div class="pi_item" @click="goUrl('/Recharge')">
						<img :src="myApp.srcPath('recharge_ico.png')" alt="">
						<span>充值</span>
					</div>
					
					<div class="pi_item" @click="goUrl('/Withdrawal')">
						<img :src="myApp.srcPath('withdrawal.png')" alt="">
						<span>提现</span>
					</div>
					
					<div class="pi_item" @click="goUrl('/WithdrawalList')">
						<img :src="myApp.srcPath('bill.png')" alt="">
						<span>资金明细</span>
					</div>
					
					<div class="pi_item" @click="goUrl('/Authentication')">
						<img :src="myApp.srcPath('card.png')" alt="">
						<span>实名认证</span>
					</div>
					
					<!-- <div class="pi_item" @click="goUrl('/Product')">
						<img :src="myApp.srcPath('withdrawal-bill.png')" alt="">
						<span>接单记录</span>
					</div> -->
					
				</div>
				
				<div class="pi_itemView">
					
					
					<div class="pi_item" @click="goUrl('/Transfer')">
						<img :src="myApp.srcPath('transformation.png')" alt="">
						<span>划转</span>
					</div>
					
					<div class="pi_item" @click="goUrl('/MyTeam')">
						<img :src="myApp.srcPath('my_team.png')" alt="">
						<span>我的团队</span>
					</div>
					
					<div class="pi_item" @click="goUrl('/InviteFriends')">
						<img :src="myApp.srcPath('Invite_friends.png')" alt="">
						<span>邀请好友</span>
					</div>
					
					<div class="pi_item" @click="goUrl('/TeamSet')">
						<img :src="myApp.srcPath('team_setting.png')" alt="">
						<span>团队设置</span>
					</div>
					
					
				</div>
			</div>
			
			<!-- 基本设置 -->
			<div class="per_item">
				<div class="pi_title">基本设置</div>
				
				<div class="pi_itemView">
					<div class="pi_item" @click="goUrl('/AnnouncementList')">
						<img :src="myApp.srcPath('notice.png')" alt="">
						<span>系统公告</span>
					</div>
					
					<div class="pi_item" @click="goUrl('/Kefu')">
						<img :src="myApp.srcPath('personnel.png')" alt="">
						<span>联系客服</span>
					</div>
					
					<div></div>
					<div></div>
				</div>
				
			</div>
			
			
			<div class="out_login" @click="outLogin()">
			
				<img :src="myApp.srcPath('out-login.png')" alt="">
				<span>退出登陆</span>
				
			</div>
			
		</div>
	</div>
</template>

<script>
	import Vue from 'vue';
	
	import {
		NavBar,Toast
	} from 'vant';

	Vue.use(NavBar)
	
	//请求
	import {UserInfo,LogOut} from '../serve/api.js'
	
	export default {
		created(){
			
			
			//如果有缓存数据则读取缓存数据   无 则调接口
			// if(this.$store.state.userData != null){
			
				// this.userInfo = this.$store.state.userData
			
			// }else{
				
				this.getUserInfo()
				
			// }
			
		},
		data(){
			
			return{
				
				userInfo:""
				
			}
			
		},
		methods: {
			goUrl(url){
				
				
				//判断是否实名认证  我的团队 提现  划转  团队设置  都必须先实名认证
				if(url == '/MyTeam' || url == '/Withdrawal' || url == '/Transfer' || url == '/TeamSet'){
					
					if(this.userInfo.is_sh != 1){
								
						Toast('请先完成实名认证！');
						
						setTimeout( () => {
							
							this.$router.push("/Authentication")
							
						},1500)
						
						return
						
					}
					
				}
				
				this.$router.push(url)
				
			},
			
			getUserInfo(){
				
				let params;
				UserInfo(params, (res) => {
					
					// console.log(res)
					
					if(res.data.code == 1){
						
						this.userInfo = res.data.data
						
					}
					
				}, (error) =>{
					
				})
				
			},
			
			outLogin(){
				
				let params;	
					
				LogOut(params , (res) => {
					
					if(res.data.code == 1){
					
						Toast('退出成功！');
						
						this.$router.push('/Login')
						
					}
					
				}, () => {
					
					Toast('网络繁忙,请稍候再试');
					
				})	
				
			}
		},
	};
</script>

<style scoped="">
	.p_levelIco{
		width: 0.35rem;
		height: 0.32rem;
		margin-left: .3rem;
	}
	
	.per_view{
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		overflow: auto;
	}

	.p_item {
		width: 6.79rem;
		height: 2.65rem;
		border-radius: .1rem;
		margin: auto;
		background-repeat: no-repeat;
		background-size: 100%;
		margin-top: .59rem;
		display: flex;
		position: relative;
	}

	.p_item div {
		flex: 1;
		display: flex;
		flex-direction: column;
		justify-content: center;
		color: white;
		align-items: center;
		font-size: .3rem;
	}

	.p_item span {
		font-size: .48rem;
		margin-top: .2rem;
	}

	.p_item p {
		font-size: .28rem;
	}
	.p_contetn{
		padding: .2rem .35rem;
		/* padding-bottom: 2rem; */
		box-sizing: border-box;
	}
	
	.pc_top{
		display: flex;
		align-items: center;
		justify-content: space-between;
	}
	
	.pt_left{
		display: flex;
		align-items: center;
	}
	
	.p_head{
		width: 1.12rem;
		height: 1.12rem;
		border-radius: 50%;
		margin-right: .22rem;
	}
	
	.pt_left span{
		font-size: .3rem;
		display: flex;
		align-items: center;
	}
	
	.pt_left div{
		margin-left: .1rem;
	}
	
	.pt_left p{
		font-size: .24rem;
		margin-top: .13rem;
	}
	
	.pt_right{
		width: .32rem;
		height: .32rem;
	}
	
	.p_authentication ,.p_authentications{
		background-color: rgb(176,202,255);
		width: 1.48rem;
		height: .32rem;
		border-radius: .05rem;
		display: flex;
		align-items: center;
		justify-content: center;
		color: #3871FC;
		font-size: .24rem;
	}
	
	.p_authentication img{
		width: .23rem;
		height: .23rem;
		margin-right: .08rem;
	}
	
	.p_authentications{
		background-color: rgba(0,0,0,0.2);
		color: #FBFBFB;
	}
	
	.p_solid {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		width: 1px;
		border-left: 1px solid rgba(255, 255, 255, .5);
		height: .7rem;
		/* background-color: red; */
	}
	
	.per_item{
		width: 100%;
		padding: .4rem .4rem .57rem .17rem;
		box-sizing: border-box;
		background-color: rgba(241,241,241,0.5);
		border-radius: .2rem;
		margin-top: .45rem;
	}
	
	.out_login{
		width: 100%;
		padding: .24rem 0rem;
		box-sizing: border-box;
		background-color: rgba(241,241,241,0.5);
		border-radius: .3rem;
		margin-top: .45rem;
		display: flex;
		align-items: center;
		justify-content: center;
		color: #999999;
		margin-bottom: 1.3rem;
	}
	
	.out_login img{
		width: .31rem;
		height: .31rem;
		margin-right: .14rem;
	}
	
	.pi_itemView div{
		flex: 1;
	}
	
	.pi_itemView{
		display: flex;
		margin-top: .24rem;
	}
	
	.pi_title{
		font-size: .28rem;
	}
	
	.pi_item{
		width: 1.72rem;
		display: flex;
		align-items: center;
		flex-direction: column;
	}
	
	.pi_item img{
		width: .5rem;
		height: .5rem;
		margin-bottom: .17rem;
	}
	
	.pi_item span{
		font-size: .24rem;
	}
	
	.out_login span{
		font-size: .28rem;
	}
	
	.per_top{
		padding: .33rem 0rem;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: .32rem;
	}
</style>
